<section class="card manual">
    <div class="card-header">
        <div ng-init="getSingle()" class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" class="form-control form-control-lg" ng-model="activedData.title" ng-blur="$ctrl.generateSEO()">
                </div>
                <div class="form-group">
                    <label>Excerpt</label>
                    <textarea class="form-control form-control-lg" ng-model="activedData.description">{{activedData.excerpt}}</textarea>
                </div>
                <custom-file header="''" folder="'Medias'" media-file="activedData.mediaFile" data="activedData"
                    src-url="activedData.mediaFile.fullPath" on-update="getList()" save="save(activedData)" auto="'false'"
                    class=""></custom-file>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <filter-list request="request" callback="getList(pageIndex)"></filter-list>
            </div>
        </div>
    </div>
    <div class="card-body">
        <table class="table table-sm table-hover" cellspacing="0">
            <thead class="thead-light">
                <tr>
                    <th scope="col" style="width: 3%;">
                        <span class="oi oi-sort-ascending"></span>
                    </th>
                    <!--<th scope="col" style="width: 4%;">
                            <span class="fas fa-sort-numeric-down"></span>
                        </th>-->
                    <th scope="col" style="width: 5%;">
                        Priority
                    </th>
                    <th scope="col" style="width: 30%;">
                        Title
                    </th>
                    <th scope="col" width="10%">
                        Image
                    </th>
                    <th scope="col" width="10%">
                        Created Date
                    </th>

                    <th scope="col" style="width: 5%;">Actions</th>
                </tr>
            </thead>

            <tbody class="sortable" ng-init="getList()">
                <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="media"
                    sort-model-id="{{item.id}}">
                    <td style="cursor:move;" class="drag-header">
                        <span class="fas fa-sort"></span>
                    </td>
                    <td>
                        {{item.priority}}
                    </td>
                    <td>

                        <div class="input-group input-group-sm">
                            <input id="path-modal-{{$index}}" value="{{item.fullPath}}" onclick="this.select()" class="form-control form-control-sm"
                                readonly="readonly">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary btn-clipboard" type="button"
                                    data-clipboard-target="#path-modal-{{$index}}"><i class="mi mi-Copy"></i></button>
                            </div>
                        </div>
                    </td>
                    <td>
                        <preview-image img-height="25" img-src="item.fullPath"></preview-image>
                    </td>
                    <td>
                        <small>
                            {{item.createdDateTime | utcToLocal:'d.M.yyyy h:mm a'}}
                        </small>
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                            <a href="/portal/media/details/{{item.id}}" class="btn btn-light">
                                <span class="fa fa-pen text-primary"></span>
                            </a>
                            <a href="{{item.fullPath}}" target="_blank" class="btn btn-light">
                                <span class="fa fa-eye text-primary"></span>
                            </a>
                            <a ng-click="clone(item.id)" class="btn btn-sm btn-light d-inline-block"><span class="fas fa-sync-alt text-primary"></span></a>

                            <button type="button" class="btn btn-light del-popover" ng-click="remove(item.id)">
                                <span class="fa fa-times text-danger"></span>
                            </button>
                            <div class="popover-body d-none">
                                <a href="/{{currentLanguage}}/portal/medias/delete/{{item.id}}" class="btn btn btn-danger">Yes,
                                    I want to delete!</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end"
            a-class="page-link" paging-action="getList(page-1)" scroll-top="true"></paging>
    </div>
</section>
